<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
      <el-form-item label="入网请求单号" prop="requestId">
        <el-input v-model="queryParams.requestId" placeholder="请输入入网请求单号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="商户类型" prop="signType">
        <el-select v-model="queryParams.signType" placeholder="请选择商户类型" clearable>
          <el-option label="企业" value="ENTERPRISE" />
          <el-option label="个体户" value="INDIVIDUAL" />
        </el-select>
      </el-form-item>
      <el-form-item label="公司名称" prop="signName">
        <name-input v-model="queryParams.signName" placeholder="请输入公司名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="shortName">
        <name-input v-model="queryParams.shortName" placeholder="请输入店铺名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商户编码" prop="subMerchantNo">
        <name-input v-model="queryParams.subMerchantNo" placeholder="请输入商户编码" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="法人姓名" prop="legalName">
        <el-input v-model="queryParams.legalName" placeholder="请输入法人姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="联系人手机号" prop="contactMobile">
        <el-input v-model="queryParams.contactMobile" placeholder="请输入联系人手机号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="联系人邮箱" prop="contactEmail">
        <el-input v-model="queryParams.contactEmail" placeholder="请输入联系人邮箱" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
          <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属平台" v-if="user.userId === 1" prop="platformNickName">
        <el-input v-model="queryParams.platformNickName" placeholder="请输入所属平台" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="所属代理" v-if="user.deptId < 101" prop="agentNickName">
        <el-input v-model="queryParams.agentNickName" placeholder="请输入所属代理" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="所属二级代理" v-if="user.deptId < 102" prop="childAgentNickName">
        <el-input v-model="queryParams.childAgentNickName" placeholder="请输入所属二级代理" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['ecs:yeePayWithholding:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['ecs:yeePayWithholding:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="yeePayList">
      <el-table-column label="店铺名称" fixed="left" min-width="200" align="center" prop="shortName">
        <template slot-scope="{ row }">
          <template v-if="row.shortName">
            <span style="cursor: pointer; white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;">{{ row.shortName }}</span>
            <br />
          </template>

          抽佣费率：{{ row.feeRate }}
          <template v-if="row.subMerchantNo">
            <br />
            商户编码：{{ row.subMerchantNo }}
          </template>
          <template v-if="user.userId === 1">
            <br />
            代运营商编：{{ row.receiveMerchantNo }}
          </template>
        </template>
      </el-table-column>
      <el-table-column label="公司名称" align="center" prop="signName" width="300" />
      <el-table-column label="所属平台" v-if="user.userId === 1" align="center" prop="platformNickName" width="210" />
      <el-table-column label="所属代理" v-if="user.deptId < 101" align="center" prop="agentNickName" width="210" />
      <el-table-column label="所属二级代理" v-if="user.deptId < 102" align="center" prop="childAgentNickName" width="210" />
      <el-table-column label="所属商户 " align="center" prop="shopNickName" width="210">
        <template slot-scope="{ row }">
          {{ row.shopNickName }}

        </template>
      </el-table-column>
      <el-table-column label="商户类型 " align="center" prop="signType">
        <template slot-scope="{ row }">
          <span v-if="row.signType === 'INDIVIDUAL'">个体户</span>
          <span v-if="row.signType === 'ENTERPRISE'">企业</span>
        </template>
      </el-table-column>
      <el-table-column label="法人姓名" align="center" prop="legalName" width="110" />
      <el-table-column label="联系人手机号" align="center" prop="contactMobile" width="110" />
      <el-table-column label="联系人邮箱" align="center" prop="contactEmail" width="180" />
      <el-table-column label="入网状态" align="center" prop="status" width="250">
        <template slot-scope="{ row }">
          入网状态：
          <span v-if="row.status === 4">
            <el-link :href="row.agreementSignUrl" type="primary" target="_blank">立即签署</el-link>
          </span>
          <span v-else>
            {{ row.status === 1 ? "待提交" : row.status === 2 ? "审核中" : row.status === 3 ? "审核驳回" : row.status === 4 ?
              "协议待签署" : row.status === 5 ? "入网完成" : row.status === 6 ? "业务开通中" : "其他" }}
          </span>

          <br />
          店铺开通状态：{{ row.shopStatus === 1 ? "待提交" : row.shopStatus === 2 ? "开通失败" : row.shopStatus === 3 ? "开通成功" : "其他"
          }}
          <br />
          绑定代运营状态：
          <span v-if="row.bindStatus === 1">
            <el-link @click="handMerchantShopBind(row)" v-if="showMerchantShopBind(row)" type="primary"
              v-hasPermi="['ecs:yeePayWithholding:edit']" target="_blank">立即绑定</el-link>
            <span v-else>未绑定</span>
          </span>
          <span v-else-if="row.bindStatus === 2">
            <el-link v-hasPermi="['ecs:yeePayWithholding:edit']" :href="row.bindUrl" type="primary"
              target="_blank">绑定链接&nbsp;</el-link>
            <el-button v-hasPermi="['ecs:yeePayWithholding:edit']" @click="handMerchantShopBind(row)"
              v-if="showMerchantShopBind(row)" type="text">重新获取</el-button>
            <el-button v-hasPermi="['ecs:yeePayWithholding:edit']" @click="handGetYopMerchantShopBind(row)"
              type="text">查询</el-button>
          </span>
          <span v-else>{{ row.bindStatus === 1 ? "待提交" : row.bindStatus === 2 ? "绑定中" : row.bindStatus === 3 ? "绑定成功" :
            row.bindStatus === 4 ? "绑定失败" : "其他" }}</span>
          <br />
          绑卡状态：
          <span v-if="row.bindCardStatus === 4 || row.bindCardStatus === 5">
            <el-link v-hasPermi="['ecs:yeePayWithholding:edit']" @click="handleBindCardCreate(row)"
              type="primary">立即绑卡</el-link>
            <el-button @click="handleBindCardCreate(row)" v-if="user.userId === 1" type="text">重新获取</el-button>
          </span>
          <span v-else-if="row.bindCardStatus === 2">
            <el-button @click="handleBindCardCreate(row)" v-if="user.userId === 1" type="text">重新获取</el-button>
            <el-link v-hasPermi="['ecs:yeePayWithholding:edit']" :href="row.yeepayPageUrl" type="primary"
              target="_blank">立即绑定</el-link>
          </span>
          <span v-else-if="row.bindCardStatus === 3">
            绑定成功
          </span>
          <span v-else-if="row.bindCardStatus === 6">
            已解绑
            <el-link v-hasPermi="['ecs:yeePayWithholding:edit']" @click="handleBindCardCreate(row)"
              type="primary">立即绑卡</el-link>
          </span>
          <span v-else>
            {{ row.bindCardStatus === 1 ? "初始化" : row.bindCardStatus === 5 ? "超时" : "其他" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="驳回原因" align="center" prop="fail" width="180">
        <template #default="{ row }">
          <el-popover placement="top-start" :width="300" trigger="click" :content="row.fail">
            <template #reference>
              <el-tag style="cursor: pointer" slot="reference">点击查看驳回原因</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="saveTime" width="180" />
      <el-table-column label="操作" fixed="right" width="180" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.status === 1 || scope.row.status === 3"
            @click="handleUpdate(scope.row)" v-hasPermi="['ecs:yeePayWithholding:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit"
            v-if="scope.row.status === 5 && (scope.row.shopStatus === 2 || scope.row.shopStatus === 1)"
            @click="handleShopUpdate(true, false, scope.row)"
            v-hasPermi="['ecs:yeePayWithholding:edit']">修改店铺信息</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit"
            v-if="scope.row.status === 5 && scope.row.shopStatus === 3 && (scope.row.bindStatus === 1 || scope.row.bindStatus === 4)"
            @click="handleBindStatus(true, false, scope.row)"
            v-hasPermi="['ecs:yeePayWithholding:edit']">绑定代运营</el-button>
          <el-button size="mini" type="text"
            v-if="scope.row.status === 5 || scope.row.status === 2 || scope.row.status === 4 || scope.row.status === 6"
            @click="handleDetail(true, scope.row.id)">详情</el-button>
          <el-button size="mini" type="text"
            v-if="user.userId === 1 && (scope.row.bindCardStatus === 3 || scope.row.bindCardStatus === 6)"
            @click="handleGetBindCardList(true, scope.row)">绑卡信息</el-button>
          <el-button size="mini" type="text" @click="feeRateOpen(scope.row)"
            v-if="user.userId === 1 && scope.row.status === 5">修改费率</el-button>
        </template>
      </el-table-column>
    </el-table>
    <detail :opens="openDetail" :type="2" :id="form.id" v-if="openDetail" :title="'详情'"
      @handOperateVisible="handleDetail">
    </detail>
    <shop :opens="openShop" :id="form.id" v-if="openShop" @handleShopUpdate="handleShopUpdate"></shop>
    <operate :opens="open" :id="form.id" :type="2" v-if="open" :title="title" @handOperateVisible="handOperateVisible">
    </operate>
    <bindAgencyOperations :opens="openBindStatus" :id="form.id" v-if="openBindStatus"
      @handleBindStatus="handleBindStatus">
    </bindAgencyOperations>
    <bindCard v-if="openBindCard" :openBindCard="openBindCard" @handleGetBindCardList="handleGetBindCardList"
      :id="form.id">
    </bindCard>

    <pagination :pageSizes="[5, 10, 20, 30]" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

    <el-dialog :title="feeRateTitle" :visible.sync="feeRateVisible" width="35%" append-to-body>
      <el-form ref="feeRateRef" :model="feeRateForm" label-width="110px" class="form">
        <el-form-item label="费率" prop="feeRate">
          <el-input-number :step="0.1" :min="0" :max="100" :precision="2" v-model.number="feeRateForm.feeRate"
            placeholder="请输入费率" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="feeRateSubmit">确 定</el-button>
        <el-button @click="feeRateCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listYeePayWithholding, bindCardCreate, updateYeePayWithholdingFeeRate, getYopMerchantShopBind, yopMerchantShopBind } from '@/api/ecs/yeePayWithholding'
import { getUserProfile } from '@/api/system/user'
import { getAgentUserId } from '@/api/ecs/agent'
import shop from './modules/shop.vue'
import operate from './modules/operate.vue'
import bindCard from './modules/bindCard.vue'
import bindAgencyOperations from './modules/bindAgencyOperations.vue'
import detail from '@/views/ecs/incoming/yeePayWithholding/modules/detail.vue'
import store from '@/store'

export default {
  name: "YeePayWithholding",
  components: {
    detail,
    shop,
    operate,
    bindCard,
    bindAgencyOperations
  },
  data() {
    return {
      statusOptions: [
        { value: 1, label: "待提交" },
        { value: 2, label: "审核中" },
        { value: 3, label: "审核驳回" },
        { value: 4, label: "协议待签署" },
        { value: 5, label: "入网完成" },
        { value: 6, label: "业务开通中" },
      ],
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 易宝入网表格数据
      yeePayList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        type: 2,
        pageNum: 1,
        pageSize: 5,
        requestId: null,
        signType: null,
        signName: null,
        shortName: null,
        subMerchantNo: null,
        legalName: null,
        contactMobile: null,
        contactEmail: null,
        status: null,
        platformNickName: null,
        agentNickName: null,
        childAgentNickName: null,
      },
      // 表单参数
      form: {},
      openBank: false,
      openDetail: false,
      openShop: false,
      openBindStatus: false,
      openBindCard: false,
      feeRateTitle: '',
      feeRateForm: { id: 0, feeRate: 0.0 },
      feeRateVisible: false,
      user: {}

    };
  },
  created() {
    getUserProfile().then(response => {
      this.user = response.data;
      if (this.user.deptId === 101) {
        getAgentUserId(this.user.userId).then(response => {
          if (response.data.agentId !== 0) {
            this.user.deptId = 102
          }
        });
      }
    });
    this.getList();
  },
  methods: {
    /** 查询易宝入网列表 */
    getList() {
      this.loading = true;
      listYeePayWithholding(this.queryParams).then(response => {
        this.yeePayList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.form.id = null
      this.title = "添加商户入网";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const id = row.id || this.ids
      this.title = "修改商户入网";
      this.form.id = id;
      this.open = true;
      // getYeePayWithholding(id).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改商户入网";
      // });
    },
    handleDetail(val, val1) {
      this.form.id = val1
      this.openDetail = val
    },
    handleShopUpdate(val, val1, val2) {
      if (val) {
        this.form.id = val2.id
      } else {
        this.form.id = null
      }
      this.openShop = val
      if (val1) {
        this.getList()
      }
    },
    handleBindStatus(val, val1, val2) {
      if (val) {
        this.form.id = val2.id
      } else {
        this.form.id = null
      }
      this.openBindStatus = val
      if (val1) {
        this.getList()
      }

    },
    handGetYopMerchantShopBind(row) {
      getYopMerchantShopBind(row).then(res => {
        if (res.code === 200) {
          if (res.data.bindStatus === 1) {
            this.$message.success("重新提交")
          } else if (res.data.bindStatus === 2) {
            this.$message.success("绑定中")
          } else if (res.data.bindStatus === 4) {
            this.$message.error("绑定失败")
          } else if (res.data.bindStatus === 3) {
            this.$message.error("绑定成功")
          }
        }
        this.getList()
      })
    },
    showMerchantShopBind(row) {
      if (this.user.userId === 1) return true
      if (store.getters.roles.some(v => v === 'platform')) {
        if (row.bindUrlRefreshCount <= 1) {
          return true
        }
      }
      return false
    },
    handMerchantShopBind(row) {
      this.$modal.confirm('是否确定重新获取公司名为"' + row.signName + '"的数据项？').then(() => {
        this.loading = true
        yopMerchantShopBind(row).then(res => {
          this.loading = false
          if (res.code === 200) {
            this.getList();
            window.open(res.data.bindUrl)
          }
        }).catch(() => {
          this.loading = false
        })
      }).catch(() => { });

    },
    handOperateVisible(val, val1, val2) {
      this.open = val
      if (val1) {
        this.getList()
      }
    },
    handleBindCardCreate(row) {
      this.loading = true
      bindCardCreate(row).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.getList();
          if (res.data.yeepayPageUrl) {
            window.open(res.data.yeepayPageUrl)
          }
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleGetBindCardList(val, row) {
      this.openBindCard = val
      if (row)
        this.form = row
    },

    feeRateOpen(row) {
      this.feeRateTitle = `修改【${row.shortName}】费率`
      this.feeRateForm.id = row.id
      this.feeRateForm.feeRate = row.feeRate
      this.feeRateVisible = true
    },
    feeRateSubmit() {
      updateYeePayWithholdingFeeRate(this.feeRateForm).then(res => {
        if (res.code === 200) {
          this.getList()
          this.feeRateVisible = false
        }
      })
    },
    feeRateCancel() {
      this.feeRateVisible = false
      this.$refs.feeRateRef.resetFields()
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('ecs/yeePayWithholding/export', {
        ...this.queryParams
      }, `yeePayWithholding_${new Date().getTime()}.xlsx`)
    },
  }
};
</script>
